<template>
  <div class="constellation-container">
    <!-- 导航 -->
    <van-nav-bar>
      <template #left>
        <span @click="$router.back()">
        <svg-icon style="margin-right: 3px;" icon-class='fanhui' width="23px" height="23px" class="icon"/>
        </span>
        返回
      </template>
      <template #right>
        性格测试
      </template>
    </van-nav-bar>
    <div class="todayDay">
      <!-- 时间选择-->
      <DatePicker v-model="selectedDate" :masks="masks" @input="handleSelected" title-position="left" color="pink">
        <template v-slot="{ inputValue, inputEvents }">
          <input
            class="selectedTime"
            :value="inputValue"
            v-on="inputEvents"/>
        </template>
      </DatePicker>
    </div>

    <div class="whiteWrap">
      <div class="matchBtn" @click="birthdayMatch" v-if="!contentString">
        <svg-icon icon-class='chukong' width="70px" height="70px" class="icon"/>
      </div>
      <!-- 文本样式  -->
      <div class="contentDesc" v-html="contentString" v-if="contentString"></div>

    </div>
    <div class="doubleWrap">
      <img :src="require('@/assets/cake.png')">
    </div>

  </div>
</template>

<script>

import dayjs from 'dayjs'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'

export default {
  name: 'constellationIndex',
  components: {
    DatePicker
  },
  data () {
    return {
      selectedDate: new Date(),
      masks: {
        input: 'YYYY 年 M 月 D 日'
      },
      postDateList: '',
      descObj: {},
      observe: {},
      contentString: ''
    }
  },
  created () {
    this.observe = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate')
          observer.unobserve(entry.target)
        }
      })
    })
  },

  computed: {
    attrs () {
      return [
        {
          key: 'today',
          highlight: {
            color: 'purple',
            fillMode: 'outline'
          },
          dates: new Date()
        }
      ]
    }
  },
  watch: {
    contentString () {
      if (this.descObj) {
        setTimeout(this.testBind, 2000)
      }
    }
  },
  methods: {
    handleSelected (date) {
      console.log(date)
      this.postDateList = dayjs(date).format('M-D').split('-')
      console.log(this.postDateList)
    },
    birthdayMatch () {
      fetch(`https://apis.tianapi.com/dob/index?key=c11a19c8088cd1833a55587b1eb8bb87&m=${this.postDateList[0]}&d=${this.postDateList[1]}`)
        .then(response => response.json())
        .then(data => {
          this.descObj = data.result
          console.log(this.descObj)
          this.contentString = this.descObj.content
        })
        .catch(error => console.error(error))
    },
    testBind () {
      document.querySelectorAll('strong').forEach(item => {
        this.observe.observe(item)
      })
    }
  }
}
</script>

<style scoped lang="less">
.constellation-container {
  ::v-deep .van-nav-bar {
    color: #fff;
    height: 160px;
    background-color: #ec87c0;

    &:after {
      content: '';
      background: url("@/assets/downSelect.png") no-repeat;
      background-size: cover;
      height: 30px;
      width: 30px;
      position: absolute;
      top: 27px;
      left: 70%;
      z-index: 99;
    }
  }

  .todayDay {

    .selectedTime {
      text-align: center;
      background-color: transparent;
      position: fixed;
      color: #fff;
      top: 30px;
      border: none;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      z-index: 2;
      font-family: "微软雅黑 Light", serif;

    }
  }

  .whiteWrap {
    width: 90%;
    height: 430px;
    background-color: #fff;
    z-index: 3;
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    overflow: auto;

    .matchBtn {
      display: inline-block;
      border-radius: 50%;
      box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translateX(-50%);

      &:active {
        transform: translateX(-50%) translateY(3px);
      }
    }

    ::v-deep .contentDesc {
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 1.5px;
      text-indent: 2em;
      margin: 5px 15px;

      p {
        strong {
          font-size: 14px;
          background-image: linear-gradient(#fbd18f, #fbd18f);
          background-repeat: no-repeat;
          background-size: 0% 38%;
          background-position: 0 100%;
          font-family: 微软雅黑;
          //animation: 2s highlight ease-in-out forwards;

          &.animate {
            animation: 2s highlight ease-in-out forwards;
          }
        }
      }
    }
  }
}

@keyframes highlight {
  to {
    background-size: 100% 38%;
  }
}

.doubleWrap {
  height: 100px;
  position: absolute;
  top: 530px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .6;

  img {
    height: 130px;
  }
}

</style>
